<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="content">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layui/css/custom.css}" media="all">
</head>
<div class="layui-card">
    <div class="layui-card-header" style="height: 100%;">
        <div class="layui-form-item" style="margin-top: 10px;">
            <div class="layui-input-inline">
                <input type="text" name="id" id="id" placeholder="编号" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="memberId" id="memberId" placeholder="会员ID" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="amount" id="amount" placeholder="充值金额" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="giftAmount" id="giftAmount" placeholder="赠送金额" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="rechargeType" id="rechargeType" placeholder="充值方式" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="operators" id="operators" placeholder="操作人姓名" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="text" id="rechargeRecordStart" name="start" placeholder="充值时间范围 起"
                       class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline">
                <input type="text" id="rechargeRecordEnd" name="end" placeholder="充值时间范围 止" class="layui-input">
            </div>
            <br/>
            <button class="layui-btn" data-type="reload">查询</button>
            <button class="layui-btn" data-type="reset">重置</button>
        </div>
    </div>
    <div class="layui-card-body">
        <table id="recharge-record-table" lay-filter="recharge-record-table"></table>
    </div>
</div>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'laydate', 'layer'], function () {
        let table = layui.table;
        let laydate = layui.laydate;
        let $ = layui.$;

        let BIZ_NAME = 'recharge-record';
        let BIZ_TABLE = 'recharge-record-table';
        let BIZ_QUERY = 'recharge-record-query';
        let tableRechargeRecordObj;

        /*检索栏按钮 点击事件监控*/
        $('.layui-form-item .layui-btn').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        let cols = [
            [
                {title: '记录编号', field: 'id', align: 'center'},
                {title: '会员ID', field: 'memberId', align: 'center'},
                {title: '会员姓名', field: 'memberName', align: 'center'},
                {title: '充值金额', field: 'amount', align: 'center'},
                {title: '赠送金额', field: 'giftAmount', align: 'center'},
                {title: '充值方式', field: 'rechargeType', align: 'center'},
                {title: '充值时间', field: 'rechargeTime', align: 'center'},
                {title: '操作人', field: 'operators', align: 'center'}
            ]
        ]

        tableRechargeRecordObj = table.render({
            elem: '#' + BIZ_TABLE,
            url: '/' + BIZ_NAME + '/page',
            text: {none: '暂无相关数据'},
            response: {
                statusCode: 200,
                msgName: 'message'
            },
            page: true,
            limit: 10,
            limits: [10, 20, 50],
            cols: cols,
            skin: 'line',
            toolbar: '#recharge-record-toolbar',
            defaultToolbar: [{
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports']
        });

        // 监听搜索
        let active = {
            reset: function () {
                $('#id').val('');
                $('#memberId').val('');
                $('#amount').val('');
                $('#giftAmount').val('');
                $('#rechargeType').val('');
                $('#operators').val('');
                $('#rechargeRecordStart').val('');
                $('#rechargeRecordEnd').val('');
            },
            reload: function () {
                //执行重载
                table.reload('recharge-record-table', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        id: $('#id').val(),
                        memberId: $('#memberId').val(),
                        amount: $('#amount').val(),
                        giftAmount: $('#giftAmount').val(),
                        rechargeType: $('#rechargeType').val(),
                        operators: $('#operators').val(),
                        start: $('#rechargeRecordStart').val(),
                        end: $('#rechargeRecordEnd').val()
                    }
                });
            }
        };
        //日期
        laydate.render({
            elem: '#rechargeRecordStart',
            type: 'datetime',
            trigger: 'click'
        });

        //日期
        laydate.render({
            elem: '#rechargeRecordEnd',
            type: 'datetime',
            trigger: 'click'
        });
    });
</script>